var oSearchBtn = document.querySelector('.searchbox .search');
//获取搜索按钮
var oInput = document.querySelector('.searchbox input');
//获取输入框

//获取localStorsge中存储的用户信息
var userinfo = JSON.parse(localStorage.getItem('userinfo'));
//渲染用户信息到首页
document.querySelector('.username').innerHTML = userinfo.name;

oSearchBtn.onclick = () => {
    //给搜索按钮添加点击事件的同时利用axios发送get请求
    axios.get('/user/search', { params: { searchkey: oInput.value } }).then((res) => {
        render(res.data.list)
        console.log(res.data);
    })
}
//给table-body绑定点击事件（事件委托）
var tablebody = document.querySelector('.table-body');
tablebody.onclick = (e) => {
    if (e.target.tagName == 'SPAN' && e.target.classList.contains('icon-shanchu')) {
        //先获取删除按钮对应用户的手机号
        axios.post('/user/delete', { phone: e.target.dataset.phone }).then((res) => {
            //发起删除请求，删除服务端的这个用户
            console.log(res.data);
            render((res.data.list))
        })
    }
}
//渲染列表
function render(data) {
    var str = '';
    // console.log(str);
    str = data.map((item, index) => {
        return `<ul class="table-head">
                    <li>${item.id}</li>
                    <li>${item.num}</li>
                    <li>${item.name}</li>
                    <li>${item.sort}</li>
                    <li>${item.status}</li>
                    <li>${item.time}</li>
                    <li>${item.shanchu}</li>
                </ul>`
    }).join('')

    if (str == '') {
        str = '<ul style="text-align:center;color:red">未查询到数据!</ul>';
    }
    document.querySelector('.table .table-body').innerHTML = str
}
//利用axios发送get请求，axios是从axios.min.js文件中暴露的，用来发送Ajax请求的一个对象
axios.get('/user/list', { params: { page: 1, count: 2 } }).then((res) => {
    //axios是axios.min.js文件中暴露的 用来发送ajax请求的一个对象
    render(res.data.list)
    //调用render方法，传入后端返回的数据，渲染列表
    console.log(res.data);
})